<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人营销台账管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 添加favicon样式 */
        .favicon {
            background-color: #019883;
            border-radius: 50%;
            display: inline-block;
            width: 16px;
            height: 16px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <header class="row bg-primary text-white p-3 mb-3">
            <div class="col-12">
                <h1 class="h3 mb-0">个人营销台账管理系统 <small class="text-white-50">By:xianyuwangyou</small></h1>
            </div>
        </header>

        <div class="row">
            <!-- 左侧表单区域 -->
            <div class="col-lg-4 mb-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">添加新记录</h5>
                    </div>
                    <div class="card-body">
                        <form id="accountForm">
                            <div class="mb-3">
                                <label for="marketer" class="form-label">营销人:</label>
                                <select class="form-select" id="marketer" required>
                                    <option value="">请选择营销人</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="product" class="form-label">产品名称:</label>
                                <select class="form-select" id="product" required>
                                    <option value="">请选择产品名称</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="amount" class="form-label">数量:</label>
                                <input type="number" class="form-control" id="amount" step="0.01" min="0" required>
                            </div>

                            <div class="mb-3">
                                <label for="date" class="form-label">日期:</label>
                                <input type="date" class="form-control" id="date" required>
                            </div>

                            <div class="mb-3">
                                <label for="notes" class="form-label">备注:</label>
                                <textarea class="form-control" id="notes" rows="2"></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary">添加记录</button>
                        </form>
                    </div>
                </div>

                <!-- 批量录入 -->
                <div class="card mt-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">选项菜单</h5>
                    </div>
                    <div class="card-body">
                        <button type="button" class="btn btn-primary" id="batchEntryBtn">
                            <i class="bi bi-list"></i> 批量录入
                        </button>
                        <button type="button" class="btn btn-success" id="exportBtn">
                            <i class="bi bi-file-earmark-spreadsheet"></i> 导出Excel
                        </button>
                        <button type="button" class="btn btn-secondary" id="manageBtn">
                            <i class="bi bi-gear"></i> 管理配置
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧表格区域 -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">台账记录</h5>
                    </div>
                    <div class="card-body">
                        <!-- 统计信息 -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="alert alert-primary">
                                    <i class="bi bi-info-circle"></i> 总计 <span id="recordCount">0</span> 条记录
                                </div>
                            </div>
                        </div>

                        <!-- 表格 -->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="accountsTable">
                                <thead>
                                    <tr>
                                        <th data-sort="id">编号 <i class="bi bi-arrow-down-up sort-icon"></i></th>
                                        <th data-sort="marketer">营销人 <i class="bi bi-arrow-down-up sort-icon"></i></th>
                                        <th data-sort="product">产品名称 <i class="bi bi-arrow-down-up sort-icon"></i></th>
                                        <th data-sort="amount">数量 <i class="bi bi-arrow-down-up sort-icon"></i></th>
                                        <th data-sort="date">日期 <i class="bi bi-arrow-down-up sort-icon"></i></th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="accountsTableBody">
                                    <!-- 数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 批量录入模态框 -->
    <div class="modal fade" id="batchModal" tabindex="-1" aria-labelledby="batchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="batchModalLabel">批量录入</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="batchMarketer" class="form-label">营销人:</label>
                        <select class="form-select" id="batchMarketer" required>
                            <option value="">请选择营销人</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="batchDate" class="form-label">日期:</label>
                        <input type="date" class="form-control" id="batchDate" required>
                    </div>
                    
                    <div class="mb-3">
                        <button type="button" class="btn btn-primary" id="addProductRowBtn">
                            <i class="bi bi-plus-circle"></i> 添加产品
                        </button>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-primary">
                                <tr>
                                    <th>产品名称</th>
                                    <th>数量</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="batchProductsTable">
                                <!-- 动态添加产品行 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveBatchBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 管理配置模态框 -->
    <div class="modal fade" id="manageModal" tabindex="-1" aria-labelledby="manageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="manageModalLabel">管理配置</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 标签页导航 -->
                    <ul class="nav nav-tabs" id="manageTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="marketer-tab" data-bs-toggle="tab" data-bs-target="#marketer-tab-pane" type="button" role="tab" aria-controls="marketer-tab-pane" aria-selected="true">营销人管理</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="product-tab" data-bs-toggle="tab" data-bs-target="#product-tab-pane" type="button" role="tab" aria-controls="product-tab-pane" aria-selected="false">产品管理</button>
                        </li>
                    </ul>
                    
                    <!-- 标签页内容 -->
                    <div class="tab-content" id="manageTabsContent">
                        <!-- 营销人管理标签页 -->
                        <div class="tab-pane fade show active" id="marketer-tab-pane" role="tabpanel" aria-labelledby="marketer-tab" tabindex="0">
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h6>营销人管理</h6>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="newMarketer" placeholder="输入新营销人">
                                        <button class="btn btn-outline-primary" type="button" id="addMarketerBtn">添加</button>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>营销人</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody id="marketerList">
                                                <!-- 营销人列表将动态加载 -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 产品管理标签页 -->
                        <div class="tab-pane fade" id="product-tab-pane" role="tabpanel" aria-labelledby="product-tab" tabindex="0">
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h6>产品管理</h6>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="newProduct" placeholder="输入新产品">
                                        <button class="btn btn-outline-primary" type="button" id="addProductBtn">添加</button>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>产品</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody id="productList">
                                                <!-- 产品列表将动态加载 -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑记录模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="editModalLabel">编辑记录</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editId">
                        <div class="mb-3">
                            <label for="editMarketer" class="form-label">营销人:</label>
                            <select class="form-select" id="editMarketer" required>
                                <option value="">请选择营销人</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="editProduct" class="form-label">产品名称:</label>
                            <select class="form-select" id="editProduct" required>
                                <option value="">请选择产品名称</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="editAmount" class="form-label">数量:</label>
                            <input type="number" class="form-control" id="editAmount" step="0.01" min="0" required>
                        </div>

                        <div class="mb-3">
                            <label for="editDate" class="form-label">日期:</label>
                            <input type="date" class="form-control" id="editDate" required>
                        </div>

                        <div class="mb-3">
                            <label for="editNotes" class="form-label">备注:</label>
                            <textarea class="form-control" id="editNotes" rows="2"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveEditBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>